<template>
	<view class="tabbar" elevation="5">
		<cover-view 
			v-for="(item, index) in list" 
			:key="index" 
			class="tabbarItem" 
			:data-path="item.pagePath" 
			:data-index="index"
			@tap="switchTab"
		>
			<template v-if="item.pagePath">
				<cover-image class="tabbarItemImg" :src="active === index ? item.selectedIconPath : item.iconPath"></cover-image>
				<!-- #ifdef H5 || MP-WEIXIN -->
				<cover-view class="tabbarItemText" :style="{color: active === index ? selectedColor : color}">{{item.text}}</cover-view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<text class="tabbarItemText" :style="{color: active === index ? selectedColor : color}">{{item.text}}</text>
				<!-- #endif -->
			</template>
		</cover-view>
		<cover-image 
			src="/static/icon/nav_scangoods.png" 
			class="scanBtn"
			@tap="navigateToScan"
		>
		</cover-image>
	</view>
</template>

<script>
	import {getScanCodeGoods} from '@/api/index.js'
	
	export default {
		props: ['active'],
		data: function() {
			return {
				selected: 0,
				// #ff4a57 #d8dde2 #7a8b9b
				color: "#7a8b9b",
				selectedColor: "#d81e06",
				showTabbar: false,
				list: [{
					pagePath: "/pages/index/index",
					iconPath: "/static/icon/icon-tab-n01.png",
					selectedIconPath: "/static/icon/icon-tab-s01.png",
					text: "首页",
				}, {
					pagePath: "/pages/category/category",
					iconPath: "/static/icon/icon-tab-n02.png",
					selectedIconPath: "/static/icon/icon-tab-s02.png",
					text: "分类"
				}, {
					// pagePath: "/pages/test",
					// iconPath: "/static/icon/fenlei.png",
					// selectedIconPath: "/static/icon/fenlei_selected.png",
					// text: "扫码"
				}, {
					pagePath: "/pages/cart/cart",
					iconPath: "/static/icon/icon-tab-n03.png",
					selectedIconPath: "/static/icon/icon-tab-s03.png",
					text: "购物车"
				}, {
					pagePath: "/pages/mine/mine",
					iconPath: "/static/icon/icon-tab-n04.png",
					selectedIconPath: "/static/icon/icon-tab-s04.png",
					text: "我的"
				}]
			}
		},
		methods: {
			switchTab(e) {
				const data = e.currentTarget.dataset
				const url = data.path
				const index = data.index
				if (!url) {return}
				console.log('url---', url, index)
				if (url == '/pages/cart/cart') {
					uni.navigateTo({
						url: url,
					})
				} else {
					uni.switchTab({
						url: url
					})
				}
			},
			async navigateToScan() {
				const res = await getScanCodeGoods()
				if (res.items.length == 0) {
					uni.navigateTo({
						url: '/pages/scan/scan'
					})
				} else {
					uni.navigateTo({
						url: '/pages/scanCodeCart/scanCodeCart'
					})
				}
				
			}
		}
	}
</script>

<style>
	.tabbar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		/* width: 750rpx; */
		height: 90rpx;
		background-color: white;
		display: flex;
		/* padding-bottom: env(safe-area-inset-bottom); */
		flex-direction: row;
		z-index: 99;
		/* box-shadow: 0rpx 10rpx 6rpx 10rpx rgba(000, 000, 000, 0.2); */
	}

	.tabbarItem {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
	}

	.tabbarItemImg {
		width: 50rpx;
		height: 50rpx;
	}

	.tabbarItemText {
		font-size: 20rpx !important;
	}
	
	.scanBtn {
		width: 118rpx;
		height: 118rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		/* #ifdef APP-PLUS */
		left: 375rpx;
		transform: translateX(-59rpx);
		/* #endif */
		bottom: 10rpx;
		z-index: 999;
	}

</style>
